<template>
    <header>
        <input type="text" id="ipt" v-model.trim="userTask" @keyup.enter="addToDoList" placeholder="请输入你的任务名称，按回车键确认"/>       
    </header>
</template>

<script>
import { ref } from 'vue'

export default {
    name:'Header',
    setup(props,{emit}) {
       let userTask=ref('')

       /* 添加任务 */
       function addToDoList(){
         if(userTask.value==='') return alert('请输入任务名称')
         emit('userTask', userTask)
         userTask.value = ''                  
       }     

       return{
        userTask,
        addToDoList
       }
    }
}
</script>

<style scoped>
header{
    width: 100%;
    height: 50px;
}
 
header input{
    width: 100%;
    height: 100%;
    padding-left: 10px;
    box-sizing: border-box;        
    outline: none;
    border: 1px solid #DFDFDF;
    border-radius: 5px;
}
</style>